<template>
    <div v-if="!showLoading">
        <div id="home" >
            <Header/>
            <!-- 轮播图-->
            <Sowing :sowing="sowing_list"/>
            <!--中部导航 -->
            <Nav :nav_list="nav_list" />
            <!-- 限时抢购 -->
            <FlashSale :flash_sale_product_list="flash_sale_product_list"/>
             <!--猜你喜欢-->
            <YouLike :you_like_product_list="you_like_product_list"/>
            <!--返回顶部-->
            <MarkPage v-if="showBackStatus" :scrollToTop="scrollToTop"/>
        </div>
    </div>
    <van-loading style="position:absolute;left:50%;top:40%;transform:translate(-50%)" v-else type="spinner" color="#75a342" >拼命加载中...</van-loading>
</template>
<script>
import {getHomeData} from './../../server/api/index';
import Header from './components/header/Header'
import Sowing from './components/sowing/Sowing'
import Nav from './components/nav/Nav'
import FlashSale from './components/flashSale/FlashSale'
import YouLike from './components/youLike/YouLike'
import MarkPage from './components/markPage/MarkPage'
// 3. 引入处理返回顶部的函数
import {showBack, animate} from "@/config/global";
// 4. 引入通讯组件
import PubSub from 'pubsub-js'
import {Toast} from 'vant';
import {mapMutations,mapState} from 'vuex'

// 引入购物车接口
import {addGoodsToCart} from './../../server/api/index';
import { async } from 'q';
export default {
    name:'Home',
    data(){
        return{
            sowing_list:[],
            // 导航数据
            nav_list:[],
            // 限时抢购数据
            flash_sale_product_list:[],
            // 猜你喜欢
            you_like_product_list: [],
            showLoading:true,
            // 是否显示返回顶部的按钮
            showBackStatus: false
        }
    },
    created(){
        // 请求网络数据
        getHomeData().then((result) => {
            console.log('result222',result)
            if(result.success){
                this.sowing_list = result.data.list[0].icon_list;
                this.nav_list = result.data.list[2].icon_list;
                this.flash_sale_product_list = result.data.list[3].product_list;
                this.you_like_product_list = result.data.list[12].product_list;
                this.showLoading = false;
                // 开始监听滚动, 到达一定位置就显示返回顶部按钮
                showBack((status)=>{
                    // console.log(status);
                    this.showBackStatus = status;
                });
            }
        }).catch((err) => {
            
        });
    },
    computed:{
        ...mapState(['userInfo'])
    },
    mounted(){
        //订阅消息(添加到购物车)
        PubSub.subscribe('homeAddToCart',(msg,goods)=>{
            if(msg === 'homeAddToCart'){
                // 判断用户是否登录
                if (this.userInfo.token) {
                    this.dealGoodsAdd(goods);
                    this.ADD_GOODS({
                    goodsId:goods.id,
                    goodsName:goods.name,
                    smallImage:goods.small_image,
                    goodsPrice:goods.price
                });
                // 提示用户
            Toast({
                message:'添加成功',
                duration:800
            });
                } else {
                    this.$router.push('/login')
                }
                
            }
            
            

        })
    },
    methods:{
        ...mapMutations(['ADD_GOODS']),
        // 1. 滚回顶部
        scrollToTop() {
            // 做缓动动画返回顶部
            let docB = document.documentElement || document.body;
            animate(docB, {scrollTop: '0'}, 400, 'ease-out');
        },
        // 2 添加商品到购物车
        async dealGoodsAdd(goods){
          let result = await addGoodsToCart(this.userInfo.token,goods.id,goods.name,goods.price,goods.small_image);
        console.log('result',result )
            
        }
    },
    components:{
        Header,
        Sowing,
        Nav,
        FlashSale,
        YouLike,
        MarkPage
    }
}
</script>
<style scoped lang="less">
#home{
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
}
</style>